import React, { useState } from 'react'

import styles from './index.module.scss'
import { Button } from '@/library/gallery/components/Button'
import { Mask } from '@/library/gallery/components/Mask'
import { DemoBlock } from '@/library/widgets/DemoBlock'
import { Space } from '@/library/gallery/components/Space'

// 基础用法
const Simple: React.FC = () => {
  const [visible, setVisible] = useState(false)
  return (
    <>
      <Button onClick={() => setVisible(true)}>显示背景蒙层</Button>
      <Mask getContainer={document.body} visible={visible} onMaskClick={() => setVisible(false)} />
    </>
  )
}

// 背景蒙层的颜色深度 - 浅一些
const Thin: React.FC = () => {
  const [visible, setVisible] = useState(false)
  return (
    <>
      <Mask
        visible={visible}
        onMaskClick={() => setVisible(false)}
        opacity="thin"
      />
      <Button onClick={() => setVisible(true)}>显示浅一些的背景蒙层</Button>
    </>
  )
}

// 背景蒙层的颜色深度 - 深一些
const Thick: React.FC = () => {
  const [visible, setVisible] = useState(false)
  return (
    <>
      <Mask
        visible={visible}
        onMaskClick={() => setVisible(false)}
        opacity="thick"
      />
      <Button onClick={() => setVisible(true)}>显示深一些的背景蒙层</Button>
    </>
  )
}

// 背景蒙层的颜色深度 - 自定义
const CustomOpacity: React.FC = () => {
  const [visible, setVisible] = useState(false)
  return (
    <>
      <Mask
        visible={visible}
        onMaskClick={() => setVisible(false)}
        opacity={0.8}
      />
      <Button onClick={() => setVisible(true)}>
        显示自定义透明度的背景蒙层
      </Button>
    </>
  )
}

// 白色的背景蒙层
const White: React.FC = () => {
  const [visible, setVisible] = useState(false)
  return (
    <>
      <Button onClick={() => setVisible(true)}>显示白色的背景蒙层</Button>
      <Mask
        color="white"
        visible={visible}
        onMaskClick={() => setVisible(false)}
      />
    </>
  )
}

// 背景蒙层的颜色 - 自定义
const CustomColor: React.FC = () => {
  const [visible, setVisible] = useState(false)
  return (
    <>
      <Mask
        visible={visible}
        onMaskClick={() => setVisible(false)}
        color="rgba(219, 10, 10, 0.5)"
      />
      <Button onClick={() => setVisible(true)}>显示自定义颜色的背景蒙层</Button>
    </>
  )
}

// 自定义内容
const WithContent: React.FC = () => {
  const [visible, setVisible] = useState(false)
  return (
    <>
      <Mask visible={visible} onMaskClick={() => setVisible(false)}>
        <div className={styles['overlay-content']}>内容</div>
      </Mask>
      <Button onClick={() => setVisible(true)}>显示带内容的背景蒙层</Button>
    </>
  )
}

// 自定义内容
const WithContentScroll: React.FC = () => {
  const [visible, setVisible] = useState(false)
  return (
    <>
      <Mask visible={visible} onMaskClick={() => setVisible(false)}>
        <div className={styles['overlay-content-scroll']}>
          <p>滚动测试-start</p>
          <p>滚动测试-start</p>
          <p>滚动测试-start</p>
          <p>滚动测试</p>
          <p>滚动测试</p>
          <p>滚动测试</p>
          <p>滚动测试</p>
          <p>滚动测试</p>
          <p>滚动测试</p>
          <p>滚动测试</p>
          <p>滚动测试</p>
          <p>滚动测试</p>
          <p>滚动测试</p>
          <p>滚动测试</p>
          <p>滚动测试</p>
          <p>滚动测试</p>
          <p>滚动测试</p>
          <p>滚动测试</p>
          <p>滚动测试</p>
          <p>滚动测试</p>
          <p>滚动测试</p>
          <p>滚动测试</p>
          <p>滚动测试</p>
          <p>滚动测试</p>
          <p>滚动测试</p>
          <p>滚动测试</p>
          <p>滚动测试</p>
          <p>滚动测试</p>
          <p>滚动测试</p>
          <p>滚动测试</p>
          <p>滚动测试</p>
          <p>滚动测试</p>
          <p>滚动测试</p>
          <p>滚动测试</p>
          <p>滚动测试</p>
          <p>滚动测试</p>
          <p>滚动测试</p>
          <p>滚动测试</p>
          <p>滚动测试</p>
          <p>滚动测试</p>
          <p>滚动测试</p>
          <p>滚动测试</p>
          <p>滚动测试</p>
          <p>滚动测试</p>
          <p>滚动测试</p>
          <p>滚动测试</p>
          <p>滚动测试</p>
          <p>滚动测试-end</p>
          <p>滚动测试-end</p>
          <p>滚动测试-end</p>
        </div>
      </Mask>
      <Button onClick={() => setVisible(true)}>显示带内容的背景蒙层</Button>
    </>
  )
}

export default ():React.ReactElement => (
  <>
    <DemoBlock title="基础用法">
      <Simple />
    </DemoBlock>

    <DemoBlock title="背景蒙层的颜色深度">
      <Space direction="vertical">
        <Thin />
        <Thick />
        <CustomOpacity />
      </Space>
    </DemoBlock>

    <DemoBlock title="背景蒙层的颜色">
      <Space direction="vertical">
        <White />
        <CustomColor />
      </Space>
    </DemoBlock>

    <DemoBlock title="自定义内容">
      <Space direction="vertical">
        <WithContent />
        <WithContentScroll />
      </Space>
    </DemoBlock>

    <DemoBlock title="自定义内容">
      <Space direction="vertical">
        <WithContent />
        <WithContentScroll />
      </Space>
    </DemoBlock>

    <DemoBlock title="自定义内容">
      <Space direction="vertical">
        <WithContent />
        <WithContentScroll />
      </Space>
    </DemoBlock>

    <DemoBlock title="自定义内容">
      <Space direction="vertical">
        <WithContent />
        <WithContentScroll />
      </Space>
    </DemoBlock>
  </>
)
